CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ãšãè¡çªãé¿ããããã®ã¹ããŒããªäœçœ®èª¿æŽã®å®è£ æ¹æ³ã解説ãã¬ã¹ãã³ã·ãã§äœ¿ããããã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããŸãã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®è¡çªåé¿ïŒã¹ããŒããªäœçœ®èª¿æŽ
CSSã®ã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯ãããèŠçŽ ïŒã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ïŒã®äœçœ®ãå¥ã®èŠçŽ ïŒã¢ã³ã«ãŒèŠçŽ ïŒã«é¢é£ä»ãã匷åãªæ¹æ³ãæäŸããŸãããã®æ©èœã¯ãåçã§ã³ã³ããã¹ããæèãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæãããšããµã€ãã£ã³ã°ãªå¯èœæ§ãåãéãäžæ¹ã§ãè¡çªåé¿ãšãã課é¡ããããããŸããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãä»ã®ã³ã³ãã³ããšéãªã£ããè¡çªããããããšããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãããã®èšäºã§ã¯ããããã®è¡çªãã¹ããŒãã«åŠçããæŽç·Žãããã¢ã¯ã»ã·ãã«ãªãã¶ã€ã³ãä¿èšŒããããã®ãã¹ããŒããªäœçœ®èª¿æŽãå®è£ ãããã¯ããã¯ãæ¢ããŸãã
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®çè§£
è¡çªåé¿ã«èžã¿èŸŒãåã«ãã¢ã³ã«ãŒããžã·ã§ãã³ã°ã®åºæ¬ãããããããŸãããããã®æ©èœã¯äž»ã«`anchor()`颿°ãšé¢é£ããCSSããããã£ã«ãã£ãŠå¶åŸ¡ãããŸãã
åºæ¬çãªæ§æ
`anchor()`颿°ã䜿çšãããšãã¢ã³ã«ãŒèŠçŽ ãåç §ãããã®èšç®å€ïŒå¹ ãé«ããäœçœ®ãªã©ïŒãååŸã§ããŸãããããŠããããã®å€ã䜿çšããŠã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãé 眮ã§ããŸãã
äŸïŒ
.anchored-element {
position: absolute;
left: anchor(--anchor-element, right);
top: anchor(--anchor-element, bottom);
}
ãã®äŸã§ã¯ã`.anchored-element`ã¯ããã®å·Šç«¯ã`--anchor-element`倿°ã«å²ãåœãŠãããèŠçŽ ã®å³ç«¯ã«ãäžç«¯ãã¢ã³ã«ãŒèŠçŽ ã®äžç«¯ã«æãããã«é 眮ãããŸãã
ã¢ã³ã«ãŒèŠçŽ ã®èšå®
`--anchor-element`倿°ã¯ãã¢ã³ã«ãŒèŠçŽ ã®`anchor-name`ããããã£ã䜿çšããŠèšå®ã§ããŸãã
.anchor-element {
anchor-name: --anchor-element;
}
è¡çªã®åé¡
ã¢ã³ã«ãŒããžã·ã§ãã³ã°åºæã®æè»æ§ã¯ã課é¡ããããããŸããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãã¢ã³ã«ãŒä»è¿ã®å©çšå¯èœãªã¹ããŒã¹ããã倧ããå Žåãåšå²ã®ã³ã³ãã³ããšéãªããèŠèŠçã«ä¹±éã«ãªãå¯èœæ§ããããŸããããã§ãè¡çªåé¿æŠç¥ãéèŠã«ãªããŸãã
ãã¿ã³ã®æšªã«è¡šç€ºãããããŒã«ããããèããŠã¿ãŸãããããã¿ã³ãç»é¢ã®ç«¯ã«è¿ãå ŽåãããŒã«ããããåããããä»ã®UIèŠçŽ ãšéãªã£ããããå¯èœæ§ããããŸããé©åã«èšèšããããœãªã¥ãŒã·ã§ã³ã¯ããããæ€åºããããŒã«ããããå®å šã«è¡šç€ºãããéèŠãªæ å ±ã劚ããªãããã«äœçœ®ã調æŽããå¿ èŠããããŸãã
ã¹ããŒããªäœçœ®èª¿æŽãã¯ããã¯
CSSã§ã¹ããŒããªäœçœ®èª¿æŽãå®è£ ããããã«ãããã€ãã®ãã¯ããã¯ã䜿çšã§ããŸããããã§ã¯ãæã广çãªæ¹æ³ã®ããã€ããæ¢ããŸãã
1. `calc()`ããã³`min`/`max`颿°ã®äœ¿çš
æãåçŽãªã¢ãããŒãã®1ã€ã¯ã`calc()`ã`min()`ããã³`max()`颿°ãšçµã¿åãããŠäœ¿çšããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ã®äœçœ®ãç¹å®ã®å¢çå ã«å¶çŽããããšã§ãã
äŸïŒ
.anchored-element {
position: absolute;
left: min(calc(anchor(--anchor-element, right) + 10px), calc(100% - width - 10px));
top: anchor(--anchor-element, bottom);
}
ãã®å Žåã`left`ããããã£ã¯2ã€ã®å€ã®æå°å€ãšããŠèšç®ãããŸãã1ã€ã¯ã¢ã³ã«ãŒã®å³äœçœ®ã«10ãã¯ã»ã«ãå ããå€ããã1ã€ã¯ã³ã³ããã®å¹ ã®100%ããèŠçŽ ã®å¹ ãš10ãã¯ã»ã«ãåŒããå€ã§ããããã«ãããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãã³ã³ããã®å³ç«¯ãããªãŒããŒãããŒããªãããšãä¿èšŒãããŸãã
ãã®ãã¯ããã¯ã¯åçŽãªã·ããªãªã«ã¯åœ¹ç«ã¡ãŸãããå¶éããããŸããä»ã®èŠçŽ ãšã®è¡çªã¯åŠçãããå¢çã®ãªãŒããŒãããŒã®ã¿ãåŠçããŸããããã«ãã¬ã€ã¢ãŠããè€éãªå Žåã¯ç®¡çãç ©éã«ãªãå¯èœæ§ããããŸãã
2. CSS倿°ãš`env()`颿°ã®æŽ»çš
ããé«åºŠãªã¢ãããŒãã¯ãCSS倿°ãš`env()`颿°ã䜿çšããŠããã¥ãŒããŒãã®ãµã€ãºããã®ä»ã®ç°å¢èŠå ã«åºã¥ããŠäœçœ®ãåçã«èª¿æŽããããšã§ããããã«ã¯ãæœåšçãªè¡çªãæ€åºããããã«å¿ããŠCSS倿°ãæŽæ°ããããã®JavaScriptãå¿ èŠã§ãã
äŸïŒæŠå¿µïŒïŒ
/* CSS */
.anchored-element {
position: absolute;
left: var(--adjusted-left, anchor(--anchor-element, right));
top: anchor(--anchor-element, bottom);
}
/* JavaScript */
function adjustPosition() {
const anchorElement = document.querySelector('.anchor-element');
const anchoredElement = document.querySelector('.anchored-element');
if (!anchorElement || !anchoredElement) return;
const anchorRect = anchorElement.getBoundingClientRect();
const anchoredRect = anchoredElement.getBoundingClientRect();
const viewportWidth = window.innerWidth;
let adjustedLeft = anchorRect.right + 10;
if (adjustedLeft + anchoredRect.width > viewportWidth) {
adjustedLeft = anchorRect.left - anchoredRect.width - 10;
}
anchoredElement.style.setProperty('--adjusted-left', adjustedLeft + 'px');
}
window.addEventListener('resize', adjustPosition);
window.addEventListener('load', adjustPosition);
ãã®äŸã§ã¯ãJavaScriptã¯ãã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãã¢ã³ã«ãŒã®å³åŽã«é 眮ãããå Žåã«ãã¥ãŒããŒããããªãŒããŒãããŒãããã©ãããæ€åºããŸãããªãŒããŒãããŒããå Žåã`adjustedLeft`å€ãåèšç®ãããã¢ã³ã«ãŒã®å·ŠåŽã«é 眮ãããŸãããã®åŸã`--adjusted-left` CSS倿°ãæŽæ°ãããããã©ã«ãã®`anchor()`颿°ã®å€ãäžæžããããŸãã
ãã®ãã¯ããã¯ã¯ãè€éãªè¡çªã·ããªãªãåŠçããäžã§ãã倧ããªæè»æ§ãæäŸããŸãããã ããJavaScriptãžã®äŸåãçºçããããã©ãŒãã³ã¹ãžã®åœ±é¿ãæ éã«èæ ®ããå¿ èŠããããŸãã
3. è¡çªæ€åºã¢ã«ãŽãªãºã ã®å®è£
æãé«åºŠãªå¶åŸ¡ãè¡ãã«ã¯ãJavaScriptã§ã«ã¹ã¿ã ã®è¡çªæ€åºã¢ã«ãŽãªãºã ãå®è£ ã§ããŸããããã«ã¯ãæœåšçãªé害ç©ãå埩åŠçããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãšã®éãªãã®åºŠåããèšç®ããããšãå«ãŸããŸãããã®æ å ±ã«åºã¥ããŠãè¡çªãåé¿ããããã«ã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ã®äœçœ®ãåããããã«ã¯ã³ã³ãã³ãã調æŽã§ããŸãã
ãã®ã¢ãããŒãã¯ãã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãè€éãªã¬ã€ã¢ãŠããšåçã«å¯Ÿè©±ããå¿ èŠãããã·ããªãªã§ç¹ã«åœ¹ç«ã¡ãŸããäŸãã°ãã³ã³ããã¹ãã¡ãã¥ãŒã¯ãä»ã®ã¡ãã¥ãŒãéèŠãªUIèŠçŽ ãšã®éãªããé¿ããããã«èªèº«ãåé 眮ããå¿ èŠããããããããŸããã
äŸïŒæŠå¿µïŒïŒ
/* JavaScript */
function avoidCollisions() {
const anchorElement = document.querySelector('.anchor-element');
const anchoredElement = document.querySelector('.anchored-element');
const obstacles = document.querySelectorAll('.obstacle');
if (!anchorElement || !anchoredElement) return;
const anchorRect = anchorElement.getBoundingClientRect();
const anchoredRect = anchoredElement.getBoundingClientRect();
let bestPosition = { left: anchorRect.right + 10, top: anchorRect.bottom };
let minOverlap = Infinity;
// Check for collisions in different positions (right, left, top, bottom)
const potentialPositions = [
{ left: anchorRect.right + 10, top: anchorRect.bottom }, // Right
{ left: anchorRect.left - anchoredRect.width - 10, top: anchorRect.bottom }, // Left
{ left: anchorRect.right, top: anchorRect.top - anchoredRect.height - 10 }, // Top
{ left: anchorRect.right, top: anchorRect.bottom + 10 } // Bottom
];
potentialPositions.forEach(position => {
let totalOverlap = 0;
obstacles.forEach(obstacle => {
const obstacleRect = obstacle.getBoundingClientRect();
const proposedRect = {
left: position.left,
top: position.top,
width: anchoredRect.width,
height: anchoredRect.height
};
const overlapArea = calculateOverlapArea(proposedRect, obstacleRect);
totalOverlap += overlapArea;
});
if (totalOverlap < minOverlap) {
minOverlap = totalOverlap;
bestPosition = position;
}
});
anchoredElement.style.left = bestPosition.left + 'px';
anchoredElement.style.top = bestPosition.top + 'px';
}
function calculateOverlapArea(rect1, rect2) {
const left = Math.max(rect1.left, rect2.left);
const top = Math.max(rect1.top, rect2.top);
const right = Math.min(rect1.left + rect1.width, rect2.left + rect2.width);
const bottom = Math.min(rect1.top + rect1.height, rect2.top + rect2.height);
const width = Math.max(0, right - left);
const height = Math.max(0, bottom - top);
return width * height;
}
window.addEventListener('resize', avoidCollisions);
window.addEventListener('load', avoidCollisions);
ãã®æŠå¿µçãªäŸã§ã¯ãæœåšçãªäœçœ®ïŒå³ãå·ŠãäžãäžïŒãå埩åŠçããåé害ç©ãšã®éãªãé åãèšç®ããŸãããã®åŸãéãªããæå°ã®äœçœ®ãéžæããŸãããã®ã¢ã«ãŽãªãºã ã¯ãç¹å®ã®äœçœ®ãåªå ããããããŸããŸãªçš®é¡ã®é害ç©ãèæ ®ããããããæ»ãããªé·ç§»ã®ããã«ã¢ãã¡ãŒã·ã§ã³ãçµã¿èŸŒãã ãããããšã§ãããã«æ¹è¯ã§ããŸãã
4. CSS Containmentã®äœ¿çš
CSS Containmentã䜿çšããŠã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãåé¢ããããšãã§ããããã«ããããã©ãŒãã³ã¹ãšäºæž¬å¯èœæ§ãåäžããŸããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ã®èŠªèŠçŽ ã«`contain: content`ãŸãã¯`contain: layout`ãé©çšããããšã§ããã®äœçœ®å€æŽãããŒãžã®ä»ã®éšåã«äžãã圱é¿ãå¶éããŸããããã¯ãè€éãªã¬ã€ã¢ãŠããé »ç¹ãªåé çœ®ãæ±ãå Žåã«ç¹ã«åœ¹ç«ã¡ãŸãã
äŸïŒ
.parent-container {
contain: content;
}
.anchored-element {
position: absolute;
/* ... anchor positioning styles ... */
}
ã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
è¡çªåé¿ãå®è£ ããéã«ã¯ãã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãäžå¯æ¬ ã§ãã調æŽãããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ã®äœçœ®ãéèŠãªæ å ±ãé ãããããŠãŒã¶ãŒãã€ã³ã¿ãŒãã§ãŒã¹ãæäœããã®ãå°é£ã«ãããããªãããã«ããŠãã ããã以äžã«ããã€ãã®äž»èŠãªã¬ã€ãã©ã€ã³ã瀺ããŸãã
- ããŒããŒãããã²ãŒã·ã§ã³ïŒããŒããŒããŠãŒã¶ãŒãã調æŽãããäœçœ®ã«ããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ã«ç°¡åã«ã¢ã¯ã»ã¹ããæäœã§ããããšã確èªããŠãã ããã
- ã¹ã¯ãªãŒã³ãªãŒããŒã®äºææ§ïŒã¹ã¯ãªãŒã³ãªãŒããŒãã調æŽåŸãã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ã®äœçœ®ãšã³ã³ãã³ããæ£ããèªã¿äžããããšã確èªããŠãã ããã
- ååãªã³ã³ãã©ã¹ãïŒå¯èªæ§ã確ä¿ããããã«ãã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãšãã®èæ¯ãšã®éã«ååãªã«ã©ãŒã³ã³ãã©ã¹ããç¶æããŠãã ããã
- ãã©ãŒã«ã¹ç®¡çïŒã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ã衚瀺ããããäœçœ®ãå€ãã£ãããããšãã«ããã©ãŒã«ã¹ãé©åã«ç®¡çããŠãã ãããå¿ èŠã«å¿ããŠããã©ãŒã«ã¹ããã®èŠçŽ ã«ç§»åããããã«ããŠãã ããã
åœéåïŒi18nïŒã«é¢ããèæ ®äºé
ç°ãªãèšèªãæžåæ¹åã¯ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã®ã¬ã€ã¢ãŠãã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸããã¢ã³ã«ãŒããžã·ã§ãã³ã°ãšè¡çªåé¿ãå®è£ ããéã«ã¯ã以äžã®ç¹ãèæ ®ããããšãäžå¯æ¬ ã§ãã
- å³ããå·ŠãžïŒRTLïŒã®èšèªïŒã¢ã©ãã¢èªãããã©ã€èªã®ãããªRTLèšèªã§ã¯ãèŠçŽ ã®ããã©ã«ãã®é 眮ãå転ããŸããè¡çªåé¿ããžãã¯ãRTLã¬ã€ã¢ãŠããæ£ããåŠçããããšã確èªããŠãã ãããèšç®ã§`left`ãš`right`ã®å€ãå ¥ãæ¿ããå¿ èŠããããããããŸããã
- ããã¹ãã®äŒžé·ïŒäžéšã®èšèªã§ã¯ãåãæ å ±ã衚瀺ããããã«ããå€ãã®ã¹ããŒã¹ãå¿ èŠã§ããããã«ãããäºæããªãè¡çªãçºçããå¯èœæ§ããããŸããããŸããŸãªèšèªã§ã¬ã€ã¢ãŠãããã¹ãããã¢ã³ã«ãŒå¯Ÿè±¡èŠçŽ ãå©çšå¯èœãªã¹ããŒã¹ã«åãŸãããšã確èªããŠãã ããã
- ãã©ã³ãã®ããªãšãŒã·ã§ã³ïŒãã©ã³ãã«ãã£ãŠæåã®å¹ ãé«ããç°ãªããŸããããã¯èŠçŽ ã®ãµã€ãºãè¡çªã®å¯èœæ§ã«åœ±é¿ãäžããå¯èœæ§ããããŸãããã©ã³ãã¡ããªã¯ã¹ã䜿çšããŠèŠçŽ ã®æ£ç¢ºãªãµã€ãºãèšç®ããããã«å¿ããŠäœçœ®ã調æŽããããšãæ€èšããŠãã ããã
ã°ããŒãã«ãªæèã§ã®äŸ
ããŸããŸãªã°ããŒãã«ã·ããªãªã§è¡çªåé¿ãã©ã®ããã«é©çšã§ããããããã€ãã®äŸãèããŠã¿ãŸãããã
- eã³ããŒã¹ãµã€ãïŒå€èšèªå¯Ÿå¿ïŒïŒè€æ°ã®èšèªããµããŒãããeã³ããŒã¹ãµã€ãã§ã¯ãããŒã«ãããã«è£œåã®èª¬æãäŸ¡æ Œæ å ±ã衚瀺ãããããšããããŸããéžæããèšèªã«é¢ä¿ãªãããããã®ããŒã«ããããå®å šã«è¡šç€ºãããååç»åãä»ã®UIèŠçŽ ãšéãªããªãããã«ããããã«ãè¡çªåé¿ã¯äžå¯æ¬ ã§ãã
- å°å³ã¢ããªã±ãŒã·ã§ã³ïŒå°å³ã¢ããªã±ãŒã·ã§ã³ã§ã¯ããŠãŒã¶ãŒãå Žæãã¯ãªãã¯ãããšæ å ±ãŠã£ã³ããŠãå¹ãåºãã衚瀺ãããããšããããŸããè¡çªåé¿ã«ãããç¹ã«äººå£å¯éå°åã§ããããã®ãŠã£ã³ããŠãä»ã®å°å³ã®å°ç©ãã©ãã«ãé ããªãããã«ããŸããããã¯ãå°å³ããŒã¿ã®å©çšå¯èœæ§ã®ã¬ãã«ãç°ãªãåœã ã§ç¹ã«éèŠã§ãã
- ããŒã¿å¯èŠåããã·ã¥ããŒãïŒããŒã¿å¯èŠåããã·ã¥ããŒãã§ã¯ãã¢ã³ã«ãŒèŠçŽ ã䜿çšããŠããŒã¿ãã€ã³ãã«é¢ããæèæ å ±ã衚瀺ããããšããããŸããè¡çªåé¿ã«ããããããã®èŠçŽ ãããŒã¿å¯èŠåèªäœãšéãªãããšããªããªãããŠãŒã¶ãŒãããŒã¿ãæ£ç¢ºã«è§£éãããããªããŸããããŒã¿è¡šç€ºã«é¢ããããŸããŸãªæåçæ £ç¿ãèæ ®ããŠãã ããã
- ãªã³ã©ã€ã³æè²ãã©ãããã©ãŒã ïŒãªã³ã©ã€ã³æè²ãã©ãããã©ãŒã ã§ã¯ãã¯ã€ãºãæŒç¿äžã«ãã³ãã説æãæäŸããããã«ã¢ã³ã«ãŒèŠçŽ ã䜿çšããããšããããŸããè¡çªåé¿ã«ããããããã®èŠçŽ ã質åãåçã®éžæè¢ãé ãããšããªããªããåŠçãåŠç¿ææã«éäžã§ããããã«ãªããŸããããŒã«ã©ã€ãºããããã³ãã説æãæ£ãã衚瀺ãããããã«ããŠãã ããã
ãã¹ããã©ã¯ãã£ã¹ãšæé©å
æé©ãªããã©ãŒãã³ã¹ãšä¿å®æ§ã確ä¿ããããã«ãã¢ã³ã«ãŒããžã·ã§ãã³ã°ãšè¡çªåé¿ãå®è£ ããéã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããã
- ã€ãã³ããªã¹ããŒã®ãããŠã³ã¹ïŒJavaScriptã䜿çšããŠè¡çªãæ€åºããå Žåãéå°ãªèšç®ãé¿ããããã«ã€ãã³ããªã¹ããŒïŒ`resize`ã`scroll`ãªã©ïŒããããŠã³ã¹ããŠãã ããã
- èŠçŽ ã®äœçœ®ããã£ãã·ã¥ããïŒäžå¿ èŠãªåèšç®ãé¿ããããã«ãã¢ã³ã«ãŒèŠçŽ ãé害ç©ã®äœçœ®ããã£ãã·ã¥ããŠãã ããã
- åé 眮ã«ã¯CSSãã©ã³ã¹ãã©ãŒã ã䜿çšããïŒããã©ãŒãã³ã¹ãåäžãããããã«ã`left`ã`top`ããããã£ãçŽæ¥å€æŽãã代ããã«ãCSSãã©ã³ã¹ãã©ãŒã ïŒäŸïŒ`translate`ïŒã䜿çšããŠãã ããã
- è¡çªæ€åºããžãã¯ã®æé©åïŒå¿ èŠãªèšç®ã®æ°ãæå°éã«æããããã«ãè¡çªæ€åºã¢ã«ãŽãªãºã ãæé©åããŠãã ããã倿°ã®é害ç©ã«å¯ŸããŠã¯ã空éã€ã³ããã¯ã¹æè¡ã®äœ¿çšãæ€èšããŠãã ããã
- 培åºçã«ãã¹ãããïŒããŸããŸãªããã€ã¹ããã©ãŠã¶ãç»é¢ãµã€ãºã§è¡çªåé¿ã®å®è£ ã培åºçã«ãã¹ãããŠãã ããã
- å¿ èŠã«å¿ããŠããªãã£ã«ã䜿çšããïŒã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯åºããµããŒããããŠããŸãããå€ããã©ãŠã¶ãšã®äºææ§ã確ä¿ããããã«ããªãã£ã«ã®äœ¿çšãæ€èšããŠãã ããã
çµè«
CSSã¢ã³ã«ãŒããžã·ã§ãã³ã°ã¯ãã¹ããŒããªè¡çªåé¿ãã¯ããã¯ãšçµã¿åãããããšã§ãåçã§ã¬ã¹ãã³ã·ããªãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãäœæããããã®åŒ·åãªã¢ãããŒããæäŸããŸããè¡çªã®å¯èœæ§ãæ éã«èæ ®ããé©åãªèª¿æŽæŠç¥ãå®è£ ããããšã§ãå¹ åºãããã€ã¹ãæåçèæ¯ã«ããã£ãŠããã¶ã€ã³ãèŠèŠçã«é åçã§äœ¿ãããããã®ã«ãªãããšãä¿èšŒã§ããŸãããã¹ãŠã®ãŠãŒã¶ãŒã«å æ¬çãªäœéšãæäŸããããã«ãã¢ã¯ã»ã·ããªãã£ãšåœéåãåªå ããããšãå¿ããªãã§ãã ãããWebéçºãé²åãç¶ããäžã§ããããã®ãã¯ããã¯ãç¿åŸããããšã¯ãçŸä»£çã§é åçããã€ã°ããŒãã«ã«ã¢ã¯ã»ã¹å¯èœãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããäžã§ãŸããŸã䟡å€ã®ãããã®ãšãªãã§ãããã